<template>
	<div>
		<van-row>
		  <van-col span="3"><router-link to="/guahao"><van-icon name="arrow-left" size="30"/> </router-link> </van-col>
		  
		  <van-col span="18">全部科室</van-col>
		  
		  <van-col span="3"><router-link to="/m2"><van-icon name="share-o" size="30"/> </router-link></van-col>
		</van-row>
		
		<van-row>
			<van-col span="24">
				<van-search
				  v-model="value"
				  shape="round"
				  background="#white"
				  placeholder="搜索医院、医生、科室、疾病和症状"
				/>
			</van-col>
		</van-row>
		<div>
			<h4 style="margin-right: 250px;" @click="dy()">常见科室</h4>
			<van-grid column-num="5" border="false">
			  <van-grid-item  icon="http://xphdata.oss-cn-beijing.aliyuncs.com/c06fedef0a074af9b7bc647fe3fda6fe_%E5%A6%87%E4%BA%A7%E7%A7%91.png?Expires=1666791202&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=33%2FE6KTzxwUVerlifYS2Htihi08%3D" to="/serch1?kName=妇产科" text="妇产科" />
			  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/ea18895bef25434a850aeddb0e7384e6_%E7%9A%AE%E8%82%A4%E7%A7%91.png?Expires=1666791346&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=takDxsM32e4fsyM4gC7ZpKopjW4%3D" to="/serch1?kName=皮肤科"  text="皮肤科" />
			  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/f95c4ccbf39a4683a78156b57db2ccbd_%E4%B8%AD%E5%8C%BB%E7%A7%91.png?Expires=1666791452&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=XKJ%2BElbXJvhRrQT59qgZzHJvE3o%3D" to="/serch1?kName=中医科" text="中医科" />
			  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/116f452bd61e443eb46c51bbe4919ec3_%E5%84%BF%E7%A7%91.png?Expires=1666791472&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=S6jaMwdCU6NHRuURMpdz2etNiOI%3D" to="/serch1?kName=儿科" text="儿科" />
			  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/8fa7c2010d9d4292a1af76cc98d8d824_%E5%A4%96%E7%A7%91.png?Expires=1666791511&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=4gkl8naJ6Nsp2Kr1bIQQyTJgRdY%3D" to="/serch1?kName=外科" text="外科" />
			</van-grid>
			
			<van-tree-select
			  v-model:active-id="activeId"
			  v-model:main-active-index="activeIndex"
			  :items="items"
			  height="450px"
			/>
		</div>
		
		
		
		
		<div style="margin-bottom: 0px;">
		      <van-sticky>
		        <van-tabbar v-model="active" route>
		          <van-tabbar-item replace to="/guahao"  icon="smile-o">首页</van-tabbar-item>
		          <van-tabbar-item icon="manager-o" to="/ghmy">我的</van-tabbar-item>
		        </van-tabbar>
		      </van-sticky>
		</div>
	
	</div>
</template>

<script>
	
	import { ref } from 'vue';
	import { watch } from 'vue';
	
	
	export default {
	  data() {
	    return {
			
			num:0,
	      items:[
	      {
	        text: '妇产科',
			id:0,
	        children: [
	          { text: '妇产科', id: 0 },
	          { text: '产科', id: 1 },
	          { text: '妇科', id: 2 },
	        ],
	      },
	      {
	        text: '内科',
			id:1,
	        children: [
	          { text: '内科', id: 0 },
	          { text: '风湿免疫科', id: 1 },
	          { text: '呼吸内科', id: 2},
	          { text: '内分泌科', id: 3 },
	          { text: '神经内科', id: 4 },
	          { text: '肾内科', id: 5 },
	          { text: '消化内科', id: 6 },
	          { text: '心血管内科', id: 7 },
	        ],
	      },
		  {
		    text: '外科',
			id:2,
		    children: [
		      { text: '外科', id: 0 },
		      { text: '肝胆胰外科', id: 1 },
		      { text: '肛肠科科', id: 2 },
		      { text: '泌尿外科科', id: 3 },
		      { text: '普通外科', id: 4 },
		      { text: '烧伤科', id: 5 },
		      { text: '神经外科', id: 6 },
		      { text: '心外科', id: 7 },
		      { text: '胸外科', id: 8 },
		      { text: '血管外科', id: 9 },
		      { text: '肝胆胰外科', id: 10 },
		    ],
		  },
		  {
		    text: '眼科',
			id:3,
		    children: [
		      { text: '眼科', id: 0 },
		      { text: '青光眼科', id: 1 },
		      { text: '白内障科', id: 2 },
		      { text: '角膜病科', id: 3 },
		      { text: '眼底科', id: 4 },
		      { text: '眼外伤科', id: 5 },
		      { text: '眼整形科', id: 6 },
		    ],
		  },
		  {
		    text: '骨科',
			id:4,
		    children: [
		      { text: '骨科', id: 0 },
		      { text: '关节外科', id: 1 },
		      { text: '创伤骨科', id: 2 },
		      { text: '脊柱外科', id: 3 },
		      { text: '运动医学科', id: 4 },
		    ],
		  },
		  {
		    text: '口腔科',
			id:5,
		    children: [
		      { text: '口腔科', id: 0 },
		    ],
		  },
		  {
		    text: '儿科',
			id:6,
		    children: [
		      { text: '儿童保健科', id: 0 },
		      { text: '小儿泌尿外科', id: 1 },
		      { text: '小儿神经内科', id: 2 },
		      { text: '小儿肾内科', id: 3 },
		      { text: '小儿外科', id: 4 },
		      { text: '小儿消化科', id: 5 },
		      { text: '小儿内科', id: 6 },
		    ],
		  },
		  {
		    text: '中医科',
			id:7,
		    children: [
		      { text: '中医科', id: 0 },
		      { text: '中医骨伤科', id: 1 },
		      { text: '中医康复科', id: 2 },
		      { text: '针灸推拿科', id: 3 },
		    ],
		  },
		  {
		    text: '肿瘤科',
			id:8,
		    children: [
		      { text: '肿瘤科', id: 0 },
		      { text: '放疗科', id: 1 },
		      { text: '肿瘤内科', id: 2 },
		      { text: '肿瘤外科', id: 3 },
		    ],
		  },
		  {
		    text: '全科',
			id:9,
		    children: [
		      { text: '全科', id: 0 },
		    ],
		  },
		  {
		    text: '男科',
			id:10,
		    children: [
		      { text: '男科', id: 0 },
		    ],
		  },
		  {
		    text: '精神心理科',
			id:11,
		    children: [
		      { text: '精神心理科', id: 0 },
		      { text: '心理咨询科', id: 1 },
		    ],
		  },
		  
		  
	    ],
	      activeId:0,
	      activeIndex:0,
	    };
	  },
	  watch: {
	      // 监听deptId
	      'activeId': 'ziji',
	      'activeIndex': 'currDeptChange'
	  },
	  methods: {
	      currDeptChange(val) {
	        console.log(this.items[val]);
			

				this.num=val;
				// console.log(this.items[val][val]);
				if(val){
					this.queryStaff()
				}
	        },
			ziji(cal){
				var name = this.items[this.num].children[cal].text;
				console.log(name);
				this.$router.push({path:'/serch1',query:{"kName":name}});
				if(cal){
					this.queryStaff()
				}
			} ,
			queryStaff() {
				// ziji(cal){
				// 	console.log(cal); 
				// } 
		    },
			dy(){
				console.log(this.items[this.activeIndex].children[this.activeId]);
			}
	    }
		
	  
	};
	
	
	
</script>

<style>
</style>
